<template>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">基础数据管理</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>网格类型管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 搜索表单区域 -->
    <div style="border: 1px solid #ccc; margin-top: 12px; padding: 8px;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="网格类型名称">
                <el-input v-model="formInline.GridTypeName" placeholder="请输入网格类型名称" clearable />
            </el-form-item>
            <el-form-item label="网格类别">
                <el-select v-model="formInline.Category" placeholder="请选择网格类别" clearable>
                    <el-option label="物理网格" value="物理网格" />
                    <el-option label="逻辑网格" value="逻辑网格" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
        </el-form>
    </div>
    {{ tableData }}


</template>

<script lang="ts" setup>
import http from '@/http/axiosHelper';
import { onMounted, reactive, ref } from 'vue'

const formInline = reactive({
    GridTypeName: '',
    Category: ''
})

const tableData = ref([])//表格的数据源

const search = () => {
    http.get('/T5/GridType/GetGridTypes',
        { params: { GridTypeName: formInline.GridTypeName, Category:formInline.Category} }
    ).then(res=>{
         tableData.value = res.data.data
    })
}

onMounted(()=>{
    search();
});
</script>

<style>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>